<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" type="text/css">
    <link rel="stylesheet" href="./font_a76oqxlbwzb/iconfont.css">
</head>

<body>
    <div class="hang">
        <div class="tit">后台管理系统<span class="iconfont icon-liebiao_o"></span></div>
        <div class="tit1"> 角色:管理员</div>
        <div class="tit1">当前用户: bootstrap中文</div>
    </div>
    <div class="ban">
        <div class="left">
            <div class="lis"><span class="iconfont icon-fangzi"></span>后台首页<span class="jianyou">></span></div>
            <div class="lis"><span class="iconfont icon-jiegousheji"></span>设计元素<span class="jianyou">></span></div>
            <div class="lis"><span class="iconfont icon-bianjisekuai"></span>表单元素<span class="jianyou">></span></div>
            <div class="lis"><span class="iconfont icon-diannao"></span>示的页面<span class="jianyou">></span></div>
            <div class="lis"><span class="iconfont icon-xiaosuolvetu"></span>常用少表<span class="jianyou">></span></div>
            <div class="lis"><span class="iconfont icon-daima"></span>四本插件<span class="jianyou">></span></div>
            <div class="lis"><span class="iconfont icon-histogram-full"></span>统计图表<span class="jianyou">></span></div>
        </div>
        <div class="right">
            <div class="shou">
                <div class="iconfont icon-zuoshuangjiantou icon"></div>
                <div> 欢迎首页</div>
                <div class="iconfont icon-youshuangjiantou  icons"></div>
            </div>

            <div class="dv">
                <div class="reng" style="background-color:#0196c0;">
                    <p>今日收入</p>
                    <span class="ru">100,000.00</span>
                    <div class="qian"><span class="iconfont icon-qiandai ding"></span></div>
                </div>
                <div class="reng" style="background-color:#0196c0;">
                    <p>昨日收入</p>
                    <span class="ru">100,000.00</span>
                    <div class="qian"><span class="iconfont icon-qian1  ding"></span></div>
                </div>
                <div class="reng" style="background-color:#14c376;">
                    <p>阅读累计收入</p>
                    <span class="ru">100,000.00</span>
                    <div class="qian"><span class="iconfont icon-qian ding"></span></div>
                </div>
                <div class="reng" style="background-color:#8f9080;">
                    <p>年度累计收入</p>
                    <span class="ru">100,000.00</span>
                    <div class="qian"><span class="iconfont icon-qian1 ding"></span></div>
                </div>

            </div>
            <div class="biaoer"></div>
            <div class="biaoyi"></div>
            <div class="td">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>商品名称</th>
                            <th>下单日期</th>
                            <th>状态</th>
                            <th>处理情况</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>滑块特效</td>
                            <td>黑色休闲裤</td>
                            <td>2019-05-01
                            </td>
                            <td> 完成</td>
                            <td> </td>
                            
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>23534536</td>
                            <td>黑色休闲裤</td>
                            <td>2019-05-01
                            </td>
                            <td>发货中</td>
                            <td>  </td>
                            
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>23534536</td>
                            <td>黑色休闲裤</td>
                            <td>2019-05-01
                            </td>
                            <td>待确认</td>
                            <td> </td>
                           
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>23534536</td>
                            <td>黑色休闲裤</td>
                            <td>2019-05-01
                            </td>
                            <td>发货中</td>
                            <td> </td>
                            
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>23534536</td>
                            <td>黑色休闲裤</td>
                            <td>2019-05-01</td>
                            <td>待确认</td>
                            <td> </td>
                        </tr>

                    </tbody>
                </table>
                <div class="foot">
                    <span>上一页</span>
                    <span>下一页</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise-ajax.js"></script>
<script src="/day14-http和cookie/作业11-16.html/mockdata.js"></script>
<script src="./mock.js"></script>
<script>
    //echats.js文件会对外暴露一个echats对象
    //1.创建并初始化一个echarts实例
    var con = document.querySelector('.biaoer');
    var e = echarts.init(con);

    //2.绘制图表
    e.setOption({
        title: { //图表的标题
            text: 'Sales  $18,230.00',
            left: '10',
            top: '10',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ['01', '02', '03', '04', '05', '06', ' 07', '08', '09', '10', '11', '12']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }

        },
        series: [ //数据系列
            {
                name: '当前每月收入',
                barWidth: 15, //柱子的宽度
                showBackground: true,//显示背景色
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2500, 1600, 1800, 3300, 4800, 3500, 1800, 2500, 2300, 1900, 3900, 2300]
            },
            {

                name: '当前每周收入',
                barWidth: 15, //柱子的宽度
                showBackground: false,//显示背景色
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [2000, 1600, 1900, 3000, 4000, 3700, 1800, 2000, 2800, 3800, 3600, 2400],
                itemStyle: {
                    normal: {
                        color: "rgb(195,231,253)",
                    }
                }
            },
        ]
    });
    var cone = document.querySelector('.biaoyi');
    var e = echarts.init(cone);
    e.setOption({
        title: { //图表的标题
            text: 'Sales  $18,230.00',
            left: '10',
            top: '10',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },


        xAxis: { //x轴设置
            data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: true
            }

        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                showBackground: false,//显示背景色
                smooth: true,
                type: 'line',//'line' , 'bar' , 'pie'
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60]
            },
            {
                name: '每年同期收入走势',
                showBackground: false,//显示背景色
                smooth: true,
                type: 'line',//'line' , 'bar' , 'pie'
                data: [47, 50, 53, 48, 40, 36, 65, 45, 58, 30, 72, 58]
            },
        ]
    })
    
    //渲染表格数据
    function render(data) {
        var str = data.map((item, index) => {
            return `<tr>
                            <td>${item.email}</td>
                            <td>${item.name}</td>
                            <td>${item.phone}</td>
                            <td>${item.ingroup}</td>
                            <td><progress value="${item.num}" max="100"</td>
                        </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }
    render( data.list )

</script>